<template>
  <div class="css-bean">

    <el-tag class="tag">一些html标签</el-tag>
    <p>一些html标签一些html<wbr>标签一些html标签一些html标签</p>
    <el-tag class="tag">实现两个直角梯形按钮斜切的效果</el-tag>
    <div class="parent">
      <div class="left">
        你好
      </div>
      <div class="right">
        css
      </div>
    </div>
    <div class="reactangle">
      <div class="reactangle-left">
        test
      </div>
      <div class="reactangle-right">
        css
      </div>
    </div>
    <ul class="example">
      <li class="active">首页案例1</li>
      <li>首页案例2</li>
    </ul>
    <div class="reactangle2"></div>
    <p>梯形</p>
    <div class="reactangle1"></div>
    
    <p>三角形</p>
    <div class="trangle"></div>
    <p>渐变</p>
    
    <div class="linear-gradient-box"></div>
    <el-tag class="tag">margin-right没效果</el-tag>
    <div class="style-box">box</div>
    <el-tag class="tag">隐藏元素的一些方法</el-tag>
    <div class="hidden-box">
      这是需要隐藏的元素
    </div>

    <el-tag class="tag">解决外边距重叠/塌陷</el-tag>
    <p>设置 overflow: auto;</p>
    <div class="margin-box">
      <div class="box">box1</div>
    </div>
    <p>设置浮动并清除浮动</p>
    <div class="box1"></div>
    <div class="box2"></div>
    <div style="clear:both"></div>

    <el-tag class="tag">清除浮动</el-tag>
    <p>(1)启动BFC <br />
      设置float 不是none值，但是排版会异常<br />
      设置overflow:hidden/auto ✅<br />
      设置display:inline-block ✅<br />
      设置position:fixed/absolute排版也会有问题<br />
      (2)末尾添加一个空的标签 ✅<br />
      (3).clearfix:after {
      content: "";
      display: block;
      clear: both;
      }
    </p>
    <div class="clearfix">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
      <!-- 清除浮动 （2）末尾添加一个空的标签 -->
      <!-- <div style="clear:both"></div> -->
    </div>



    <el-tag class="tag">flex布局</el-tag>
    <div class="flex-box">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
      <div class="box box4">box4</div>
    </div>

    <el-tag class="tag">css实现三栏布局</el-tag>
    <p>（1）【float】左边float: left;右边float: right; 中间左右平移</p>
    <div class="layer1">
      <div class="box left-bar">left</div>
      <div class="box right-bar">right</div>
      <div class="box middle-bar">middle</div>
    </div>
    <p>（2）【position】 中间优先显示 left-bar: left:0; right-bar: right:0; middle-bar: left:200px; right:200px;</p>
    <div class="layer2">
      <div class="box middle-bar">middle</div>
      <div class="box left-bar">left</div>
      <div class="box right-bar">right</div>
    </div>
    <p>（3）【flex】 中间优先显示 left-bar: order:1; middle-bar: order:2; flex-grow: 1;right-bar: order:3; </p>
    <div class="layer3">
      <div class="box middle-bar">middle</div>
      <div class="box left-bar">left</div>
      <div class="box right-bar">right</div>
    </div>
    <p>（4）【圣杯布局】 中间优先显示 设置浮动和相对定位 父级padding留出左右位置</p>
    <div class="layer4">
      <div class="box middle-bar">middle</div>
      <div class="box left-bar">left</div>
      <div class="box right-bar">right</div>
    </div>
    <p>（5）【双飞翼布局】 中间优先显示 middle多加一层dom 内部用margin:0 200px;给左右留出位置</p>
    <div class="layer5">
      <div class="box middle">
        <div class="content">middle</div>
      </div>
      <div class="box left-bar">left</div>
      <div class="box right-bar">right</div>
    </div>
    <el-tag class="tag">css实现文字两端对齐</el-tag>
    <div class="container1">
      <span>行内元素</span>
    </div>
    <div class="container2">
      <span>行内元素</span>
    </div>
    <p>【flex】适用-元素宽高不确定</p>
    <p>1. justify-content/align-items</p>
    <p>2. margin:auto</p>
    <div class="container3">
      <div class="box">块级元素-flex</div>
    </div>
    <p>【absolute1】top:50%;
      left:50%;
      transform: translate(-50%,-50%); 适用-元素宽高不确定</p>
    <div class="container4">
      <div class="box">块级元素-absolute1</div>
    </div>
    <p>【absolute2】margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;</p>
    <div class="container5">
      <div class="box">块级元素-absolute2</div>
    </div>
    <p>【absolute3】top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;</p>
    <div class="container6">
      <div class="box">块级元素-absolute3</div>
    </div>
    <el-tag class="tag">css实现文字两端对齐</el-tag>
    <div class="div1">
      <div class="div2">
        <p>姓名</p>
        <p>身份证</p>
        <p>联系电话</p>
      </div>
      <div class="div3">
        <p>姓名</p>
        <p>身份证</p>
        <p>联系电话</p>
      </div>
    </div>
    <p>没对齐</p>
    <el-form class="demo-form1" label-width="80px">
      <el-form-item label="姓名">
        <el-input placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input placeholder=""></el-input>
      </el-form-item>
    </el-form>
    <p>对齐</p>
    <el-form class="demo-form2" label-width="80px">
      <el-form-item label="姓名">
        <el-input placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input placeholder=""></el-input>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>


export default {
  name: 'CssBean',
  data() {
    return {

    }
  }
}
</script>
<style scoped>
.css-bean {

  /* background: #ff0000 url("@/assets/images/image-16.png") no-repeat fixed center; */
  /* background:  url("@/assets/images/image-16.png") no-repeat fixed; */
  .demo-form1 {
    width: 500px;
  }

  .demo-form2 {
    width: 500px;
    text-align: justify;
    text-align-last: justify;
    /* 两端对齐 */
  }

  .tag {
    margin: 20px 0px;
  }

  .div1 {
    display: flex;
    gap: 100px;

    .div2,
    .div3 {
      width: 100px;
    }

    .div3 {
      text-align: justify;
      text-align-last: justify;
    }
  }

  .container1 {
    width: 200px;
    height: 200px;
    background-color: thistle;
    text-align: center;
    line-height: 200px;
  }

  .container2 {
    width: 200px;
    height: 200px;
    background-color: gainsboro;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }

  .container3 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    display: flex;

    /* justify-content:center;
    align-items:center; */
    .box {
      background-color: lightpink;
      /* 水平 */
      margin: auto;
    }
  }

  .container4 {
    width: 200px;
    height: 200px;
    background-color: lightsalmon;
    position: relative;

    .box {
      background-color: lightpink;
      position: absolute;
      top: 50%;
      /*左上角的点*/
      left: 50%;
      transform: translate(-50%, -50%);
      /** xy轴上反向平移50%*/
    }
  }

  .container5 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    position: relative;

    .box {
      width: 100px;
      height: 100px;
      background-color: lightpink;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  .container6 {
    width: 200px;
    height: 200px;
    background-color: lightsalmon;
    position: relative;

    .box {
      width: 100px;
      height: 100px;
      background-color: lightpink;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
      /**手动平移 */
    }
  }

  .layer1 {
    width: 600px;
    /** content-box */
    height: 200px;
    /* padding: 20px; */
    background-color: thistle;

    .box {
      width: 200px;
      height: 100%;
    }

    .left-bar {
      background-color: gainsboro;
      float: left;
    }

    .right-bar {
      background-color: lightsalmon;
      float: right;
    }

    .middle-bar {
      background-color: lightblue;
      margin-left: 200px;
      margin-right: 200px;
    }
  }

  .layer2 {
    width: 600px;
    /** content-box */
    height: 200px;
    /* padding: 20px; */
    background-color: thistle;
    position: relative;

    .box {
      width: 200px;
      height: 100%;
      position: absolute;
    }

    .left-bar {
      background-color: gainsboro;
      left: 0;
    }

    .right-bar {
      background-color: lightsalmon;
      right: 0;
    }

    .middle-bar {
      background-color: lightblue;
      margin: 0 200px;
      /* left:200px;
      right:200px; */
    }
  }

  .layer3 {
    width: 600px;
    /** content-box */
    height: 200px;
    display: flex;
    background-color: thistle;

    .box {
      width: 200px;
      height: 100%;
    }

    .left-bar {
      background-color: gainsboro;
      order: 1;
    }

    .right-bar {
      background-color: lightsalmon;
      order: 3;
    }

    .middle-bar {
      background-color: lightblue;
      order: 2;
      flex-grow: 1;
      /* flex-grow : 默认值为0，为0时有剩余空间也不放大，
      子元素该属性均为1时，剩余空间被所有为1的子元素均分，
      有一个子元素该属性为2时，
      该元素将分得或者努力分得其他为1的子元素所分得空间2倍大小的空间 */
      /* flex-shrink : 默认值为1，当子元素中存在某个元素该属性为0时，
    若空间不足，则为1的缩小，为0的不变，
    因此可以猜测，为2的弱小的应该是更多，
    应该是缩小了为1缩小的空间的两倍 */
    }
  }

  .layer4 {
    min-width: 200px;
    /**防止左右被挤下去 */
    height: 200px;
    padding: 0 200px;
    /**给左右空出来 */
    background-color: thistle;

    .box {
      height: 100%;
      position: relative;
      float: left;
    }

    .left-bar {
      background-color: gainsboro;
      width: 200px;
      margin-left: -100%;
      /**贴近最左侧 */
      left: -200px;
      /**相对定位 调到左侧贴边 跟padding重叠*/
    }

    .right-bar {
      background-color: lightsalmon;
      width: 200px;
      margin-left: -200px;
      right: -200px;
      /**相对定位 调到右侧贴边 跟padding重叠 */
    }

    .middle-bar {
      background-color: lightblue;
      width: 100%;
    }
  }

  .layer5 {
    min-width: 200px;
    /**防止左右被挤下去 */
    height: 200px;
    background-color: thistle;

    .box {
      height: 100%;
      float: left;
    }

    .left-bar {
      background-color: gainsboro;
      width: 200px;
      margin-left: -100%;
      /**贴近最左侧 */
    }

    .right-bar {
      background-color: lightsalmon;
      width: 200px;
      margin-left: -200px;
    }

    .middle {
      width: 100%;

      .content {
        height: 100%;
        margin: 0 200px;
        /**给左右留出位置 */
        background-color: lightblue;
      }
    }
  }

  .flex-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 10px;

    .box {
      width: 100px;
      height: 100px;
      border: 1px solid gray;
      background-color: lightpink;
    }
  }

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

  .clearfix {
    /* height:300px; */
    width: 100%;
    background-color: lightblue;

    /* float:left; */
    /* overflow:hidden; */
    /* display: inline-block; */
    /* position: fixed; */
    .box {
      width: 200px;
      height: 300px;
    }

    .box1 {
      background-color: gainsboro;
      float: left;
    }

    .box2 {
      background-color: lightsalmon;
      float: left;
    }

    .box3 {
      background-color: lightpink;
      /* height:400px; */
      float: left;
    }
  }

  .box1 {
    width: 200px;
    height: 200px;
    background-color: gainsboro;
    margin: 20px 0px;
  }

  .box2 {
    width: 200px;
    height: 200px;
    background-color: lightsalmon;
    margin: 20px 0px;
    float: left;
  }

  .margin-box {
    width: 200px;
    height: 200px;
    background-color: lightblue;

    /* display: inline-block; */
    /* overflow: auto; */
    .box {
      width: 100px;
      height: 100px;
      background-color: lightpink;
      margin-top: 50px
    }

    .box:after {
      content: "";
      display: block;
      clear: both;
    }
  }

  .hidden-box {
    /**位置空间不保留 */
    /* display: none;  */
    /**位置空间保留 */
    /* visibility: hidden; */
    /* opacity: 0; */
    /* transform: scale(0); */
  }

  .style-box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    margin-right: 200px;
    /* display: inline-block; */
  }

  .example {
    overflow: hidden;
    background: #f5d7b7;
    height: 44px;
    padding: 0;
    line-height: 44px;
  }

  .example>li {
    float: left;
    position: relative;
    width: 50%;
    text-align: center;
    list-style: none;
  }

  .example>li:before,
  .example>li:after {
    position: absolute;
    top: 0;
  }

  .example>li:before {
    width: 44px;
    height: 44px;
    right: -43px;
    background: inherit;
  }

  .example>li:after {
    right: -44px;
    border: 22px solid;
    border-color: transparent #f5d7b7 #f5d7b7 transparent;
  }

  .example>li.active {
    background: -webkit-linear-gradient(top,
        #f3941d,
        #f3941d 50%,
        #f08513 50%,
        #f08513);
  }

  .example>li.active:before,
  .example>li.active:after {
    content: "";
  }

  .reactangle1 {
    width: 600px;
    height: 200px;
    /* background-color: lightblue; */
    /* 
    （1） -135deg: 从右往左
     默认180deg 从上往下 90deg 从左往右 0deg 从下到上 -90deg从右到左
     (2) transparent 52px
    */
    background: linear-gradient(-135deg, transparent 200px, lightpink 0);
    background-repeat: no-repeat;
  }

  .linear-gradient-box {
    width: 400px;
    height: 200px;
    background: linear-gradient(-135deg, blue, red);
  }

  .reactangle2 {
    width: 400px;
    height: 150px;
    background: linear-gradient(45deg, lightblue 200px, lightpink 0);
    background-repeat: no-repeat;
  }

  div.parent {
    display: flex;
    width: 500px;
  }

  div.right {
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: antiquewhite;
    position: relative;
  }

  div.left {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: aquamarine;
    position: relative;
  }

  div.right::before {
    content: '';
    height: 0px;
    width: 0px;
    position: absolute;
    left: -50px;
    top: -50px;
    border-top: 50px solid rgba(0, 0, 0, 0);
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-bottom: 50px solid antiquewhite;
  }

  div.left::after {
    content: '';
    height: 0px;
    width: 0px;
    position: absolute;
    right: -50px;
    top: -50px;
    border-top: 50px solid rgba(0, 0, 0, 0);
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-bottom: 50px solid aquamarine;
  }
  .trangle{
    /* width:100px; */
    width:0px;
    height:0px;
    border-top:50px solid transparent;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:50px solid #f08513;
  }

  .reactangle{
    display: flex;
    .reactangle-left{
      width: 250px;
      height: 50px;
      background-color: lightgray;
    }

    .reactangle-right{
      width: 250px;
      height: 50px;
      background-color: lightsalmon;
      position: relative;
    }
    .reactangle-right::before {
      content: '';
      height: 0px;
      width: 0px;
      border-top: 25px solid transparent;
      border-right: 25px solid lightsalmon;
      border-left: 25px solid transparent;
      border-bottom: 25px solid lightsalmon;
      position: absolute;
      left: -50px;
      
    }
  }
}
</style>